<template>
	<view class="">
		<swiper v-if="swiperList.length!=0" class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="1000">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<image :src="item.img" mode="aspectFill" :style="{backgroundColor:item}" class="swiper-img" />
			</swiper-item>
		</swiper>
		<view style="margin: 0 30rpx;">
			<uni-notice-bar scrollable="true" v-if="textList.length!=0" background-color="#fff" :text="textList"
				:speed="50">
			</uni-notice-bar>
		</view>
		<view class="drawImgBox" style=";" @click="onGoRaw">
			<!-- <view style="margin: 0 30rpx;" @click="onSkip(`/package/mine/circleDraw?id=${goId.dzp}&bid=0&pageType=2`)"> -->
			<image class="drawImg" src="https://wx.2024csnl.com/static/mine/choujiang.png"></image>
		</view>
		<view class="between card-box">
			<view class="bidding-card between column" @click="showToast('待开放，敬请期待!')">
				<view class="">
					<view class="bidding-label">产品竞拍</view>
					<view class="bidding-end">距离结束</view>
					<countdown downTime="2022-10-20 17:30:00" margin="8"></countdown>
				</view>
				<view class="" style="text-align: right;">
					<!-- @click="$toPage('/pages/draw/bidding')" -->
					<view class="bidding-btn">立即竞拍</view>
				</view>
			</view>

			<view class="card-right between column">
				<view class="box-item integral-draw">
					<view class="">
						<view class="label">泌豆抽奖</view>
						<view class="draw-content">泌豆抽奖抽不停</view>
					</view>
					<view class="" style="text-align: right;">
						<view class="draw-btn"
							@click="$toPage(`/pages/draw/lotteryDraw/lotteryDraw?id=${goId.jfcj}&bid=0&pageType=2`)">
							立即抽奖</view>
					</view>
				</view>

				<view class="box-item scraping-card" @click="showToast('待开放，敬请期待!')">
					<view class="">
						<view class="label">盲盒刮卡</view>
						<view class="scraping-content">官方版权消费抽奖</view>
					</view>
					<view class="" style="text-align: right;">
						<!-- @click="$toPage(`/pages/draw/scratch-card?pageType=2&id=${goId.ggk}`)" -->
						<view class="scraping-btn">立即刮卡</view>
					</view>
				</view>
			</view>
		</view>


		<view class="flex check-type">
			<view class="fl" :class="{act:typeIndex==1}" @click="checkType(1)">最热</view>
			<view class="fl" :class="{act:typeIndex==2}" @click="checkType(2)">最新</view>
		</view>

		<view class="box">
			<view class="label-name">锦鲤塘（社区）</view>
			<view class="between discuss-box">
				<view class="discuss-card column" v-for="(item,index) in koiFish" :key="index"
					@click="onSkip(`/pages/draw/previous-discuss?id=${item.id}`)">
					<!-- <image src="https://wx.2024csnl.com/static/goods/sj.png" mode="aspectFill" class="discount-img" /> -->
					<image :src="item.pic" mode="aspectFill" class="discount-img" />
					<view class="discuss-info">
						<view class="discuss-title">{{item.speechs}}</view>
						<view class="between align">
							<view class="flex align">
								<image :src="item.headimg" mode="aspectFill" class="info-img" />
								<view class="">{{item.nickname}}</view>
							</view>
							<view class="flex align">
								<image v-if="item.islike!=0" src="https://wx.2024csnl.com/static/goods/draw-liked.png" mode="aspectFill"
									class="like-icon" @click.stop="onGetLike(item.id)" />
								<image v-else src="https://wx.2024csnl.com/static/goods/draw-like.png" mode="aspectFill" class="like-icon"
									@click.stop="onGetLike(item.id)" />
								<view class="">{{item.like}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPrizesMsg,
		givePrizesLike
	} from "../../api/index.js"
	import countdown from '@/components/countdown.vue'
	export default {
		components: {
			countdown
		},
		data() {
			return {
				goId: {}, //进抽奖页获取的id
				textList: [],
				systemBarHeight: getApp().globalData.systemBarHeight,
				swiperList: ['#69B0FE', '#4295FF', '#2842ED', '#1F3AED'],
				typeIndex: 1,
				bid: 0,
				koiFish: [],
				music: null,
			}
		},
		onLoad() {

		},
		onShow() {
			this.onGetPrizesMsg()
		},
		methods: {
			onGoRaw() {
				this.onSkip(`/package/mine/crowdFundingDraw?id=${this.goId.dzp}&bid=0&pageType=2`)
			},
			// 点赞
			async onGetLike(id) {
				const res = await givePrizesLike("s=/ApiChoujiang/dianzan", {
					id: id
				})
				const {
					status,
					msg
				} = res.data
				console.log(res, "res")
				this.showToast(msg)
				if (status == 1) {
					setTimeout(() => {
						this.koiFish = []
						this.onGetPrizesMsg()
					}, 2000)
				}

			},
			async onGetPrizesMsg() {
				const res = await getPrizesMsg('s=/ApiChoujiang/main', {
					bid: this.bid,
					sort: this.typeIndex == 1 ? 'like' : 'id'
				})
				const {
					status,
					msg,
					data
				} = res.data
				console.log(res, "res---")
				if (status == 1) {
					this.swiperList = data.banner
					this.koiFish = data.jl
					this.goId = data.activt
					this.textList = data.records.map((item, i) => {
						return {
							content: `${item.name} ${item.val}`
						}
					})
				} else {
					this.showToast(msg)
				}
			},

			checkType(i) {
				this.typeIndex = i;
				this.onGetPrizesMsg()
			},

		}
	}
</script>

<style>
	page {
		background-color: #41644A;
	}
</style>

<style lang="scss" scoped>
	.drawImgBox {
		margin: 0 30rpx;
		width: 93vw;
		height: 250rpx;
	}

	.drawImg {
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		width: 710rpx;
		height: 296rpx;
		margin: 20rpx auto;

		.swiper-img {
			width: 710rpx;
			height: 296rpx;
			border-radius: 13rpx;
			background-color: #69B0FE;
		}
	}

	.card-box {
		margin: 30rpx 20rpx;

		.bidding-card {
			width: 210rpx;
			height: 260rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-right: 20rpx;
			background-image: linear-gradient(to bottom, #FCCB02, #FEE504);

			.bidding-label {
				font-weight: bold;
			}

			.bidding-end {
				font-size: 24rpx;
				color: #FF6200;
				margin-bottom: 16rpx;
			}

			.bidding-btn {
				font-size: 24rpx;
				background-color: #FFF;
				display: inline-block;
				padding: 8rpx 24rpx;
				border-radius: 30rpx;
				font-weight: bold;
			}
		}

		.card-right {
			flex: 1;

			.box-item {
				margin-top: 10rpx;
				height: 100rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				font-size: 20rpx;
			}

			.integral-draw {
				background-image: linear-gradient(to right bottom, #2FD0FE, #3AC3FF);
			}

			.scraping-card {
				background-image: linear-gradient(to right bottom, #FFDD75, #FC8F29);
			}

			.label {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFF;
			}

			.draw-content {
				color: #D4F1FF;
			}

			.scraping-content {
				color: #FFDAB3;
			}

			.draw-btn,
			.scraping-btn {
				margin-top: -18rpx;
				font-size: 24rpx;
				background-color: #FFF;
				display: inline-block;
				padding: 8rpx 24rpx;
				border-radius: 30rpx;
				font-weight: bold;
			}

			.draw-btn {
				color: #3AC3FF;
			}

			.scraping-btn {
				color: #FC8F29;
			}
		}
	}

	.check-type {
		width: 600rpx;
		margin: 56rpx auto;
		background-color: #FFF;
		text-align: center;
		line-height: 64rpx;
		border-radius: 33rpx;
		font-size: 29rpx;
		color: #B3B3B3;

		.act {
			color: #41644A;
			font-weight: bold;
		}
	}

	.box {
		display: flex;
		flex-direction: column;

		.label-name {
			padding: 0 20rpx;
			font-size: 29rpx;
			color: #FFF;
		}

		.discuss-box {
			margin: 20rpx;
			flex-wrap: wrap;

			.discuss-card {
				display: inline-block;
				width: 343rpx;
				border-radius: 20rpx;
				background-color: #FFF;
				font-size: 24rpx;
				margin-bottom: 20rpx;

				.discount-img {
					width: 343rpx;
					height: 368rpx;
					border-radius: 20rpx 20rpx 0 0;
				}

				.discuss-info {
					padding: 20rpx;
				}

				.discuss-title {
					width: 300rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 16rpx;

				}

				.info-img {
					width: 53rpx;
					height: 53rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.like-icon {
					width: 33rpx;
					height: 33rpx;
					margin-right: 8rpx;
				}
			}
		}

	}
</style>
